/*
 * @Author: xyf
 * @Date: 2021-06-28 14:38:07
 * @LastEditTime: 2021-07-12 15:21:56
 * @LastEditors: xyf
 * @Description: mixin
 */
/* 三角形 */
@mixin triangle($direction, $width, $height, $color) {
  @if not
    index('up' 'up-right' 'right' 'down-right' 'down' 'down-left' 'left' 'up-left', $direction)
  {
    @error "Direction must be `up`, `up-right`, `right`, `down-right`, "+"`down`, `down-left`, `left` or `up-left`.";
  } @else if not _is-color($color) {
    @error "`#{$color}` is not a valid color for the `$color` argument in "+"the `triangle` mixin.";
  } @else {
    display: inline-block;
    border-style: solid;
    height: 0;
    width: 0;

    @if $direction== 'up' {
      border-color: transparent transparent $color;
      border-width: 0 ($width / 2) $height;
    } @else if $direction== 'right' {
      border-color: transparent transparent transparent $color;
      border-width: $height $width;
    } @else if $direction== 'down' {
      border-color: $color transparent transparent;
      border-width: $height ($width / 2) 0;
    } @else if $direction== 'left' {
      border-color: transparent $color transparent transparent;
      border-width: $height/2 $width/2;
    }
  }
}
